<template>
    <div id="tmpl">
      <!-- 图片分类 -->
      <div id="cate">
          <ul v-bind="{style:'width:'+ulWidth+'px'}">
              <li @click="getimgs(0)">全部</li>
              
              <li v-for="(item,index) in cates" :key="index" @click="getimgs(item.id)">{{item.title}}</li>
               
          </ul>
      </div>
      <!-- 图片列表 -->
      <div id="imglist">
            <ul>
                <li v-for="(item,index) in list" :key="index">
                    <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                    <img v-lazy='item.img_url'>
                    <div id="desc">
                        <h5 v-text="item.title"></h5>
                        <p v-text="item.zhaiyao"></p>
                    </div>
                    </router-link>
                </li>
            </ul>
      </div>
    </div>  
</template>

<script>
import common from '../../kits/common.js';
import { Toast } from "mint-ui";
export default {
    data(){
        return {
            ulWidth:320,
            cates:[], //图片分类数据
            list:[]
        }
    },
    created(){
        this.getcates();
        var all = 0 
        this.getimgs(all);
    },
    methods:{
        getcates(){
            //
            var url =common.apidomain+'/api/getimgcategory';
            //
            this.$http.get(url).then(function(res){
                if(res.body.status!=0){
                    Toast(res.body.message);
                    return;
                }
                //
               this.cates=res.body.message; 
               //
               var w = 65;
               var count =res.body.message.length+1;
               this.ulWidth=w*count;
            })
        },
        getimgs(cateid){
            cateid=cateid||0;
            var url = common.apidomain+'/api/getimages/'+cateid;
            this.$http.get(url).then(function(res){
                if(res.body.status!=0){
                    Toast(res.body.message);
                    return
                }
                this.list=res.body.message;
            })
        }
    }

};
</script>

<style scoped>
#cate {
  width: 375px;
  max-width: 375px;
  overflow-x: auto;
}
#cate ul {
  margin: 0px;
  padding-left: 10px;
  margin-bottom: 15px;
}
#cate li {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  color: #ff3040;
  font-size: 12px;
  padding-left: 5px;
}
#imglist{


}
#imglist ul{
padding-left: 0px;
}
#imglist li{
list-style: none;
position: relative;
}
#imglist li img{
    width: 100%;
    height: 300px;
}
#desc{
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 2px;
    left: 0px; 
}
#desc h5{
    color: #fff;
    font-weight: 700;
}
#desc p{
    color: #fff;
}
image[lazy=loading]{
    width: 40px;
    height: 300px;
    margin: auto;
}
</style>
